<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico"
    type="image/x-icon" />
  <link rel="icon" type="image/svg+xml"
    href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg" />
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .dib .icon {
      cursor: pointer;
    }

    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    ::-webkit-scrollbar-thumb {
      background-color: #0003;
      border-radius: 10px;
      transition: all .2s ease-in-out;
    }

    ::-webkit-scrollbar-track {
      border-radius: 10px;
    }
  </style>
</head>

<body>
  <div class="main">
    <div class="tab-container">
      <div class="content font-class">
        <ul class="icon_lists dib-box">

          <li class="dib">
            <span class="icon iconfont cc-run-up"></span>
            <div class="name">
              run-up
            </div>
            <div class="code-name">cc-run-up
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-picture"></span>
            <div class="name">
              picture
            </div>
            <div class="code-name">cc-picture
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-run-in"></span>
            <div class="name">
              run-in
            </div>
            <div class="code-name">cc-run-in
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-pin"></span>
            <div class="name">
              pin
            </div>
            <div class="code-name">cc-pin
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-save"></span>
            <div class="name">
              save
            </div>
            <div class="code-name">cc-save
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">cc-search
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-share"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">cc-share
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-scanning"></span>
            <div class="name">
              scanning
            </div>
            <div class="code-name">cc-scanning
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-security"></span>
            <div class="name">
              security
            </div>
            <div class="code-name">cc-security
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-sign-out"></span>
            <div class="name">
              sign-out
            </div>
            <div class="code-name">cc-sign-out
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-select"></span>
            <div class="name">
              select
            </div>
            <div class="code-name">cc-select
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-stop"></span>
            <div class="name">
              stop
            </div>
            <div class="code-name">cc-stop
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-success"></span>
            <div class="name">
              success
            </div>
            <div class="code-name">cc-success
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-smile"></span>
            <div class="name">
              smile
            </div>
            <div class="code-name">cc-smile
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-switch"></span>
            <div class="name">
              switch
            </div>
            <div class="code-name">cc-switch
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-setting"></span>
            <div class="name">
              setting
            </div>
            <div class="code-name">cc-setting
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-survey"></span>
            <div class="name">
              survey
            </div>
            <div class="code-name">cc-survey
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-task"></span>
            <div class="name">
              task
            </div>
            <div class="code-name">cc-task
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-skip"></span>
            <div class="name">
              skip
            </div>
            <div class="code-name">cc-skip
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-text"></span>
            <div class="name">
              text
            </div>
            <div class="code-name">cc-text
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-time"></span>
            <div class="name">
              time
            </div>
            <div class="code-name">cc-time
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-telephone-out"></span>
            <div class="name">
              telephone-out
            </div>
            <div class="code-name">cc-telephone-out
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-toggle-left"></span>
            <div class="name">
              toggle-left
            </div>
            <div class="code-name">cc-toggle-left
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-toggle-right"></span>
            <div class="name">
              toggle-right
            </div>
            <div class="code-name">cc-toggle-right
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-telephone"></span>
            <div class="name">
              telephone
            </div>
            <div class="code-name">cc-telephone
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-top"></span>
            <div class="name">
              top
            </div>
            <div class="code-name">cc-top
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-unlock"></span>
            <div class="name">
              unlock
            </div>
            <div class="code-name">cc-unlock
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-user"></span>
            <div class="name">
              user
            </div>
            <div class="code-name">cc-user
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-upload"></span>
            <div class="name">
              upload
            </div>
            <div class="code-name">cc-upload
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-work"></span>
            <div class="name">
              work
            </div>
            <div class="code-name">cc-work
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-training"></span>
            <div class="name">
              training
            </div>
            <div class="code-name">cc-training
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-warning"></span>
            <div class="name">
              warning
            </div>
            <div class="code-name">cc-warning
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-zoom-in"></span>
            <div class="name">
              zoom-in
            </div>
            <div class="code-name">cc-zoom-in
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-zoom-out"></span>
            <div class="name">
              zoom-out
            </div>
            <div class="code-name">cc-zoom-out
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-add-bold"></span>
            <div class="name">
              add-bold
            </div>
            <div class="code-name">cc-add-bold
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-arrow-left-bold"></span>
            <div class="name">
              arrow-left-bold
            </div>
            <div class="code-name">cc-arrow-left-bold
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-close-bold"></span>
            <div class="name">
              close-bold
            </div>
            <div class="code-name">cc-close-bold
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-minus-bold"></span>
            <div class="name">
              minus-bold
            </div>
            <div class="code-name">cc-minus-bold
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-arrow-right-bold"></span>
            <div class="name">
              arrow-right-bold
            </div>
            <div class="code-name">cc-arrow-right-bold
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-select-bold"></span>
            <div class="name">
              select-bold
            </div>
            <div class="code-name">cc-select-bold
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-arrow-up-filling"></span>
            <div class="name">
              arrow-up-filling
            </div>
            <div class="code-name">cc-arrow-up-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-arrow-down-filling"></span>
            <div class="name">
              arrow-down-filling
            </div>
            <div class="code-name">cc-arrow-down-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-arrow-left-filling"></span>
            <div class="name">
              arrow-left-filling
            </div>
            <div class="code-name">cc-arrow-left-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-arrow-right-filling"></span>
            <div class="name">
              arrow-right-filling
            </div>
            <div class="code-name">cc-arrow-right-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-caps-unlock-filling"></span>
            <div class="name">
              caps-unlock-filling
            </div>
            <div class="code-name">cc-caps-unlock-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-comment-filling"></span>
            <div class="name">
              comment-filling
            </div>
            <div class="code-name">cc-comment-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-check-item-filling"></span>
            <div class="name">
              check-item-filling
            </div>
            <div class="code-name">cc-check-item-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-clock-filling"></span>
            <div class="name">
              clock-filling
            </div>
            <div class="code-name">cc-clock-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-delete-filling"></span>
            <div class="name">
              delete-filling
            </div>
            <div class="code-name">cc-delete-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-decline-filling"></span>
            <div class="name">
              decline-filling
            </div>
            <div class="code-name">cc-decline-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-dynamic-filling"></span>
            <div class="name">
              dynamic-filling
            </div>
            <div class="code-name">cc-dynamic-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-intermediate-filling"></span>
            <div class="name">
              intermediate-filling
            </div>
            <div class="code-name">cc-intermediate-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-favorite-filling"></span>
            <div class="name">
              favorite-filling
            </div>
            <div class="code-name">cc-favorite-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-layout-filling"></span>
            <div class="name">
              layout-filling
            </div>
            <div class="code-name">cc-layout-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-help-filling"></span>
            <div class="name">
              help-filling
            </div>
            <div class="code-name">cc-help-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-history-filling"></span>
            <div class="name">
              history-filling
            </div>
            <div class="code-name">cc-history-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-filter-filling"></span>
            <div class="name">
              filter-filling
            </div>
            <div class="code-name">cc-filter-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-file-common-filling"></span>
            <div class="name">
              file-common-filling
            </div>
            <div class="code-name">cc-file-common-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-news-filling"></span>
            <div class="name">
              news-filling
            </div>
            <div class="code-name">cc-news-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-edit-filling"></span>
            <div class="name">
              edit-filling
            </div>
            <div class="code-name">cc-edit-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-fullscreen-expand-filling"></span>
            <div class="name">
              fullscreen-expand-filling
            </div>
            <div class="code-name">cc-fullscreen-expand-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-smile-filling"></span>
            <div class="name">
              smile-filling
            </div>
            <div class="code-name">cc-smile-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-rise-filling"></span>
            <div class="name">
              rise-filling
            </div>
            <div class="code-name">cc-rise-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-picture-filling"></span>
            <div class="name">
              picture-filling
            </div>
            <div class="code-name">cc-picture-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-notification-filling"></span>
            <div class="name">
              notification-filling
            </div>
            <div class="code-name">cc-notification-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-user-filling"></span>
            <div class="name">
              user-filling
            </div>
            <div class="code-name">cc-user-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-setting-filling"></span>
            <div class="name">
              setting-filling
            </div>
            <div class="code-name">cc-setting-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-switch-filling"></span>
            <div class="name">
              switch-filling
            </div>
            <div class="code-name">cc-switch-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-work-filling"></span>
            <div class="name">
              work-filling
            </div>
            <div class="code-name">cc-work-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-task-filling"></span>
            <div class="name">
              task-filling
            </div>
            <div class="code-name">cc-task-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-success-filling"></span>
            <div class="name">
              success-filling
            </div>
            <div class="code-name">cc-success-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-warning-filling"></span>
            <div class="name">
              warning-filling
            </div>
            <div class="code-name">cc-warning-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-folder-filling"></span>
            <div class="name">
              folder-filling
            </div>
            <div class="code-name">cc-folder-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-map-filling"></span>
            <div class="name">
              map-filling
            </div>
            <div class="code-name">cc-map-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-prompt-filling"></span>
            <div class="name">
              prompt-filling
            </div>
            <div class="code-name">cc-prompt-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-meh-filling"></span>
            <div class="name">
              meh-filling
            </div>
            <div class="code-name">cc-meh-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-cry-filling"></span>
            <div class="name">
              cry-filling
            </div>
            <div class="code-name">cc-cry-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-top-filling"></span>
            <div class="name">
              top-filling
            </div>
            <div class="code-name">cc-top-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-home-filling"></span>
            <div class="name">
              home-filling
            </div>
            <div class="code-name">cc-home-filling
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-sorting"></span>
            <div class="name">
              sorting
            </div>
            <div class="code-name">cc-sorting
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-3column"></span>
            <div class="name">
              column-3
            </div>
            <div class="code-name">cc-3column
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-column-4"></span>
            <div class="name">
              column-4
            </div>
            <div class="code-name">cc-column-4
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-add"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">cc-add
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-add-circle"></span>
            <div class="name">
              add-circle
            </div>
            <div class="code-name">cc-add-circle
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-adjust"></span>
            <div class="name">
              adjust
            </div>
            <div class="code-name">cc-adjust
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-arrow-up-circle"></span>
            <div class="name">
              arrow-up-circle
            </div>
            <div class="code-name">cc-arrow-up-circle
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-arrow-right-circle"></span>
            <div class="name">
              arrow-right-circle
            </div>
            <div class="code-name">cc-arrow-right-circle
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-arrow-down"></span>
            <div class="name">
              arrow-down
            </div>
            <div class="code-name">cc-arrow-down
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-ashbin"></span>
            <div class="name">
              ashbin
            </div>
            <div class="code-name">cc-ashbin
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-arrow-right"></span>
            <div class="name">
              arrow-right
            </div>
            <div class="code-name">cc-arrow-right
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-browse"></span>
            <div class="name">
              browse
            </div>
            <div class="code-name">cc-browse
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-bottom"></span>
            <div class="name">
              bottom
            </div>
            <div class="code-name">cc-bottom
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-back"></span>
            <div class="name">
              back
            </div>
            <div class="code-name">cc-back
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-bad"></span>
            <div class="name">
              bad
            </div>
            <div class="code-name">cc-bad
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-arrow-double-left"></span>
            <div class="name">
              arrow-double-left
            </div>
            <div class="code-name">cc-arrow-double-left
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-arrow-left-circle"></span>
            <div class="name">
              arrow-left-circle
            </div>
            <div class="code-name">cc-arrow-left-circle
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-arrow-double-right"></span>
            <div class="name">
              arrow-double-right
            </div>
            <div class="code-name">cc-arrow-double-right
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-caps-lock"></span>
            <div class="name">
              caps-lock
            </div>
            <div class="code-name">cc-caps-lock
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-camera"></span>
            <div class="name">
              camera
            </div>
            <div class="code-name">cc-camera
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-chart-bar"></span>
            <div class="name">
              chart-bar
            </div>
            <div class="code-name">cc-chart-bar
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-attachment"></span>
            <div class="name">
              attachment
            </div>
            <div class="code-name">cc-attachment
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-code"></span>
            <div class="name">
              code
            </div>
            <div class="code-name">cc-code
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-close"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">cc-close
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-check-item"></span>
            <div class="name">
              check-item
            </div>
            <div class="code-name">cc-check-item
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-calendar"></span>
            <div class="name">
              calendar
            </div>
            <div class="code-name">cc-calendar
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-comment"></span>
            <div class="name">
              comment
            </div>
            <div class="code-name">cc-comment
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-column-vertical"></span>
            <div class="name">
              column-vertical
            </div>
            <div class="code-name">cc-column-vertical
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-column-horizontal"></span>
            <div class="name">
              column-horizontal
            </div>
            <div class="code-name">cc-column-horizontal
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-complete"></span>
            <div class="name">
              complete
            </div>
            <div class="code-name">cc-complete
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-chart-pie"></span>
            <div class="name">
              chart-pie
            </div>
            <div class="code-name">cc-chart-pie
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-cry"></span>
            <div class="name">
              cry
            </div>
            <div class="code-name">cc-cry
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-customer-service"></span>
            <div class="name">
              customer-service
            </div>
            <div class="code-name">cc-customer-service
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-delete"></span>
            <div class="name">
              delete
            </div>
            <div class="code-name">cc-delete
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-direction-down"></span>
            <div class="name">
              direction-down
            </div>
            <div class="code-name">cc-direction-down
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-copy"></span>
            <div class="name">
              copy
            </div>
            <div class="code-name">cc-copy
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-cut"></span>
            <div class="name">
              cut
            </div>
            <div class="code-name">cc-cut
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-data-view"></span>
            <div class="name">
              data-view
            </div>
            <div class="code-name">cc-data-view
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-direction-down-circle"></span>
            <div class="name">
              direction-down-circle
            </div>
            <div class="code-name">cc-direction-down-circle
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-direction-right"></span>
            <div class="name">
              direction-right
            </div>
            <div class="code-name">cc-direction-right
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-direction-up"></span>
            <div class="name">
              direction-up
            </div>
            <div class="code-name">cc-direction-up
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-discount"></span>
            <div class="name">
              discount
            </div>
            <div class="code-name">cc-discount
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-direction-left"></span>
            <div class="name">
              direction-left
            </div>
            <div class="code-name">cc-direction-left
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-download"></span>
            <div class="name">
              download
            </div>
            <div class="code-name">cc-download
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-electronics"></span>
            <div class="name">
              electronics
            </div>
            <div class="code-name">cc-electronics
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-drag"></span>
            <div class="name">
              drag
            </div>
            <div class="code-name">cc-drag
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-elipsis"></span>
            <div class="name">
              elipsis
            </div>
            <div class="code-name">cc-elipsis
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-export"></span>
            <div class="name">
              export
            </div>
            <div class="code-name">cc-export
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-explain"></span>
            <div class="name">
              explain
            </div>
            <div class="code-name">cc-explain
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-edit"></span>
            <div class="name">
              edit
            </div>
            <div class="code-name">cc-edit
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-eye-close"></span>
            <div class="name">
              eye-close
            </div>
            <div class="code-name">cc-eye-close
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-email"></span>
            <div class="name">
              email
            </div>
            <div class="code-name">cc-email
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-error"></span>
            <div class="name">
              error
            </div>
            <div class="code-name">cc-error
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-favorite"></span>
            <div class="name">
              favorite
            </div>
            <div class="code-name">cc-favorite
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-file-common"></span>
            <div class="name">
              file-common
            </div>
            <div class="code-name">cc-file-common
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-file-delete"></span>
            <div class="name">
              file-delete
            </div>
            <div class="code-name">cc-file-delete
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-file-add"></span>
            <div class="name">
              file-add
            </div>
            <div class="code-name">cc-file-add
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-film"></span>
            <div class="name">
              film
            </div>
            <div class="code-name">cc-film
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-fabulous"></span>
            <div class="name">
              fabulous
            </div>
            <div class="code-name">cc-fabulous
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-file"></span>
            <div class="name">
              file
            </div>
            <div class="code-name">cc-file
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-folder-close"></span>
            <div class="name">
              folder-close
            </div>
            <div class="code-name">cc-folder-close
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-filter"></span>
            <div class="name">
              filter
            </div>
            <div class="code-name">cc-filter
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-good"></span>
            <div class="name">
              good
            </div>
            <div class="code-name">cc-good
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-hide"></span>
            <div class="name">
              hide
            </div>
            <div class="code-name">cc-hide
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-home"></span>
            <div class="name">
              home
            </div>
            <div class="code-name">cc-home
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-history"></span>
            <div class="name">
              history
            </div>
            <div class="code-name">cc-history
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-file-open"></span>
            <div class="name">
              file-open
            </div>
            <div class="code-name">cc-file-open
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-forward"></span>
            <div class="name">
              forward
            </div>
            <div class="code-name">cc-forward
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-import"></span>
            <div class="name">
              import
            </div>
            <div class="code-name">cc-import
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-image-text"></span>
            <div class="name">
              image-text
            </div>
            <div class="code-name">cc-image-text
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-keyboard-26"></span>
            <div class="name">
              keyboard-26
            </div>
            <div class="code-name">cc-keyboard-26
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-keyboard-9"></span>
            <div class="name">
              keyboard-9
            </div>
            <div class="code-name">cc-keyboard-9
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-link"></span>
            <div class="name">
              link
            </div>
            <div class="code-name">cc-link
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-layout"></span>
            <div class="name">
              layout
            </div>
            <div class="code-name">cc-layout
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-fullscreen-shrink"></span>
            <div class="name">
              fullscreen-shrink
            </div>
            <div class="code-name">cc-fullscreen-shrink
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-layers"></span>
            <div class="name">
              layers
            </div>
            <div class="code-name">cc-layers
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-lock"></span>
            <div class="name">
              lock
            </div>
            <div class="code-name">cc-lock
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-fullscreen-expand"></span>
            <div class="name">
              fullscreen-expand
            </div>
            <div class="code-name">cc-fullscreen-expand
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-map"></span>
            <div class="name">
              map
            </div>
            <div class="code-name">cc-map
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-meh"></span>
            <div class="name">
              meh
            </div>
            <div class="code-name">cc-meh
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-menu"></span>
            <div class="name">
              menu
            </div>
            <div class="code-name">cc-menu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-loading"></span>
            <div class="name">
              loading
            </div>
            <div class="code-name">cc-loading
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-help"></span>
            <div class="name">
              help
            </div>
            <div class="code-name">cc-help
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-minus-circle"></span>
            <div class="name">
              minus-circle
            </div>
            <div class="code-name">cc-minus-circle
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-modular"></span>
            <div class="name">
              modular
            </div>
            <div class="code-name">cc-modular
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-notification"></span>
            <div class="name">
              notification
            </div>
            <div class="code-name">cc-notification
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-mic"></span>
            <div class="name">
              mic
            </div>
            <div class="code-name">cc-mic
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-more"></span>
            <div class="name">
              more
            </div>
            <div class="code-name">cc-more
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-pad"></span>
            <div class="name">
              pad
            </div>
            <div class="code-name">cc-pad
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-operation"></span>
            <div class="name">
              operation
            </div>
            <div class="code-name">cc-operation
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-play"></span>
            <div class="name">
              play
            </div>
            <div class="code-name">cc-play
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-print"></span>
            <div class="name">
              print
            </div>
            <div class="code-name">cc-print
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-mobile-phone"></span>
            <div class="name">
              mobile-phone
            </div>
            <div class="code-name">cc-mobile-phone
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-minus"></span>
            <div class="name">
              minus
            </div>
            <div class="code-name">cc-minus
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-navigation"></span>
            <div class="name">
              navigation
            </div>
            <div class="code-name">cc-navigation
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-pdf"></span>
            <div class="name">
              pdf
            </div>
            <div class="code-name">cc-pdf
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-prompt"></span>
            <div class="name">
              prompt
            </div>
            <div class="code-name">cc-prompt
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-move"></span>
            <div class="name">
              move
            </div>
            <div class="code-name">cc-move
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-refresh"></span>
            <div class="name">
              refresh
            </div>
            <div class="code-name">cc-refresh
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-yuan"></span>
            <div class="name">
              美元
            </div>
            <div class="code-name">cc-yuan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-baifenhao"></span>
            <div class="name">
              百分号
            </div>
            <div class="code-name">cc-baifenhao
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-shang"></span>
            <div class="name">
              arrow-up-bold
            </div>
            <div class="code-name">cc-shang
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-xia"></span>
            <div class="name">
              arrow-down-bold
            </div>
            <div class="code-name">cc-xia
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-cuo"></span>
            <div class="name">
              错
            </div>
            <div class="code-name">cc-cuo
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-shezhi"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">cc-shezhi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-zuoshuangjiantou"></span>
            <div class="name">
              左双箭头
            </div>
            <div class="code-name">cc-zuoshuangjiantou
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-youshuangjiantou"></span>
            <div class="name">
              右双箭头
            </div>
            <div class="code-name">cc-youshuangjiantou
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-yindao"></span>
            <div class="name">
              新手引导
            </div>
            <div class="code-name">cc-yindao
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-shouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">cc-shouye
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-zujian"></span>
            <div class="name">
              活动组件-22
            </div>
            <div class="code-name">cc-zujian
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-ziyuan"></span>
            <div class="name">
              语言切换
            </div>
            <div class="code-name">cc-ziyuan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-in"></span>
            <div class="name">
              i18n
            </div>
            <div class="code-name">cc-in
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-qiehuanyuyan"></span>
            <div class="name">
              切换语言
            </div>
            <div class="code-name">cc-qiehuanyuyan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">cc-sousuo
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-jiesuo"></span>
            <div class="name">
              解锁
            </div>
            <div class="code-name">cc-jiesuo
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-denglu"></span>
            <div class="name">
              登录
            </div>
            <div class="code-name">cc-denglu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-shouji"></span>
            <div class="name">
              手机
            </div>
            <div class="code-name">cc-shouji
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-qq"></span>
            <div class="name">
              qq
            </div>
            <div class="code-name">cc-qq
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont cc-weixin"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">cc-weixin
            </div>
          </li>

        </ul>
      </div>
    </div>
  </div>
  <script>
    $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>

</html>